<template>
  <div class="my-tag">
    <input
      v-if="isshow"
      v-focus
      class="input"
      type="text"
      :value="modelValue"
      @keyup.enter="handleEnter"
      placeholder="输入标签"
      @blur="isshow = false"
    />
    <div v-else class="text" @dblclick="dblclk">
      {{ props.modelValue }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, defineProps, defineEmits} from "vue";

const isshow = ref(false);

const dblclk = () => {
  isshow.value = true;
};
const props = defineProps({
  modelValue: String,
});
const emit = defineEmits(["update:modelValue"]);

const handleEnter = (e: any) => {
  if (e.target.value.trim === "") return alert("内容不能为空");
  emit("update:modelValue", e.target.value);
  isshow.value = false;
};
</script>

<style lang="scss" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>
